<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hello{
            background: pink;
            width: 800px;
            height: 300px;

            /* 弹性盒子(弹性布局) */
            display: flex;
            /* 水平对齐 */
            /* justify-content: space-between; */
            /* justify-content: space-around; */
            justify-content: space-evenly;
            /* 垂直对齐 */
            align-items: center;

            /* 圆角 */
            border-radius: 55px;
        }
        .aaa{
            width: 200px;
            height: 100px;
            background: green;
            /* 浮动 */
            /* float: left; */
        }

        /* 
            position 定位方式：
                1.static 默认定位方式，按照标准流排列
                2.relative 相对定位，相对于自己原来的位置进行的移动
                3.absolute 绝对定位，相对于非static定位的父元素进行的移动
                4.fixed 固定定位，相对于浏览器窗口进行的移动

            偏移量：
                1.top
                2.right
                3.bottom
                4.left
        */
        .container{
            border: 1px solid #ccc;
            width: 500px;
            position: relative;
        }
        .container div{
            width: 100px;
            height: 100px;
        }
        .d1{
            background: red;
            /* 相对定位 */
            position: relative;
            top: 50px;
            left:120px;
        }
        .d2{
            background: green;
            /* 绝对定位 */
            position: absolute;
            top: -50px;
            right: 100px;
        }
        .d3{
            background: blue;
            /* 固定定位 */
            position: fixed;
            bottom: 100px;
            right: 100px;
        }
        .d4{
            background: pink;
        }

        .wrapper{
            width: 600px;
            height: 300px;
            background: #ccc;
            position: relative;
        }
        .wrapper .title{
            width: 200px;
            height: 100px;
            background: red;
            /* 绝对定位 */
            position: absolute;
            top: 50%;
            left: 50%;
            /* 平移 */
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="hello">
        <div class="aaa">跟汤老师学开发</div>
        <div class="aaa">走上人生巅峰</div>
        <div class="aaa">赢取白富美</div>
    </div>

    <img src="./assets/imgs/shuai.webp" style="width: 500px; height: 500px; border-radius: 50%">

    <div class="container">
        <div class="d1">div1</div>
        <div class="d2">div2</div>
        <div class="d3">div3</div>
        <div class="d4">div4</div>
    </div>
    <hr>

    <div class="wrapper">
        <div class="title">嘿嘿</div>
    </div>
</body>
</html>